<template>
  <div class="ht-container" v-loading="state.loading">
    <HtHeader :data="breadData"> </HtHeader>

    <OldHtSearch
      @handelVisible="handelVisible"
      placeholder="搜索    交酒单号、收酒单号、收酒厂区、收酒酒库、酒品名称、酒品代码"
      @reset="reset"
      :showFilter="true"
      @search="search"
    >
      <el-col :span="6">
        <el-form-item label="收酒厂区">
          <ht-select-base-data
            style="width: 100%"
            dataTypeId="Factorys"
            :hide-code="true"
            :value="state.filter.factoryAreaId"
            @change="handlefactoryArea"
            :clearable="true"
          ></ht-select-base-data>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="收酒酒品">
          <SelectWine
            :dataTypeId="'positions'"
            v-model="state.filter.reciveWineBreedCode"
            @change="handleSearch"
            :clearable="true"
          ></SelectWine>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="是否降级">
          <el-select
            v-model="state.filter.isDemoted"
            :clearable="true"
            @change="handleSearch"
            style="width:100%"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in state.options1"
              :key="index"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="收酒日期">
          <SelectTimeRange
            :pickerOptions="{
              disabledDate(time) {
                return time.getTime() > Date.now();
              },
            }"
            style="width: 100%; margin-top: 4px"
            v-model="state.filter.timeArr"
            @change="handleSearch"
            :clearable="true"
          ></SelectTimeRange>
        </el-form-item>
      </el-col>
    </OldHtSearch>

    <el-card class="ht-card" style="margin-top: 16px">
      <ht-table
        class="ht-table-no-border"
        :data="state.dataSource"
        @onchange="changePage"
        style="width: 100%; margin-top: 12px"
        border
        pageStyle="text-align:right"
        :height="`calc(100vh - 314px - ${state.searchHeight}px)`"
        highlight-current-row
        :page-info="{
          currentPage: state.filter.currentPage,
          pageSize: state.filter.maxResultCount,
          skipCount: state.filter.skipCount,
          totalCount: state.filter.totalCount,
        }"
        :columns="columns"
      >
        <Temp slot="empty">
          <span slot="tips">暂无数据哦</span>
        </Temp>

        <template slot="reciveWineBreedMaduDate" slot-scope="{ row }">
          {{ row.reciveWineBreedMaduDate.slice(0, 7) }}
        </template>
        <template slot="reciveWineDate" slot-scope="{ row }">
          {{ row.reciveWineDate.slice(0, 10) }}
        </template>

        <template slot="weight" slot-scope="{ row }">
          {{ row.weight }}{{ row.uom }}
        </template>
        <template slot="convertValue" slot-scope="{ row }">
          {{ row.convertValue }}{{ row.uom }}
        </template>

        <!-- 收酒状态 -->

        <template slot="isDemoted" slot-scope="{ row }">
          <span v-if="row.isDemoted == true">是</span>

          <span v-else>否</span>

          <!-- <Status> {{ row.wineStatus }}</Status> -->
        </template>

        <template slot="handel" slot-scope="{ row }">
          <span
            class="cursor"
            style="margin-right:16px;"
            @click="handDetail(row)"
            >详情</span
          >
        </template>
      </ht-table></el-card
    >

    <!-- 收酒详情 -->
    <ht-drawer
      class="ht-new-drawer"
      v-if="state.visible1"
      v-model="state.visible1"
      title="收酒详情"
      size="100%"
    >
      <CollectWineRecord :selectRow="this.state.selectRow"></CollectWineRecord>

      <div slot="foot">
        <!-- 提示 -->

        <el-button
          :loading="state.loading"
          style="margin: 0px 24px; "
          @click="state.visible1 = false"
          >取消</el-button
        >
      </div>
    </ht-drawer>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import HtHeader from '@/components/htHeader.vue';
import { BreadType, Column, PageType } from 'htui-yllkbz/src/packages/type';
import OldHtSearch from '@/components/oldHtSearch.vue';
import Temp from '@/components/temp.vue';
import Status from '@/components/status.vue';
import BackTracking from './backTracking.vue';
import ApplySucceed from './applySucceed.vue';
import CollectWineDetail from './collectWineDetail.vue';
import SelectTimeRange from '@/components/selectTimeRange.vue';
import WineApplication from './wineApplication.vue';
import CollectWineRecord from './collectWineRecord.vue';
import { _axios } from 'vue-kst-auth';
import { ReceiveWineOrderApi, ReciveWineStatusEnum } from '@/plugins/api';
import SelectWineInventory from '@/components/selectWineInventory.vue';
import SelectWine from '@/components/selectWine.vue';
interface State {
  /** 数据状态 */
  loading: boolean;
  searchHeight: number;
  filter: {
    keyWord: string | undefined;
    reciveWineOrderNo: string | undefined;
    transOrderNo: string | undefined;
    factoryArea: string | undefined;
    factoryAreaId: string | undefined;
    wineWarehouseCode: string | undefined;
    reciveWineBreedCode: string | undefined;
    isDemoted: boolean | undefined;
    reciveWineStatus: ReciveWineStatusEnum | undefined;
    reciveWineDateBegin: string | undefined;
    reciveWineDateEnd: string | undefined;
    timeArr: any;
    skipCount: number;
    maxResultCount: number;
    totalCount: number;
    currentPage: number;
  };
  dataSource: any;
  /** 批量选中的数据 */
  selectRow: any;
  selectRows: any[];
  visible: boolean;
  visible1: boolean;
  visible2: boolean;
  active: number;
  activeName: string;
  backTrackingData: any;
  // 收酒状态
  options: any;
  //是否降级
  options1: any;
}
@Component({
  components: {
    SelectWine,
    SelectWineInventory,
    HtHeader,
    OldHtSearch,
    Temp,
    Status,
    SelectTimeRange,
    BackTracking,
    ApplySucceed,
    CollectWineDetail,
    WineApplication,
    CollectWineRecord,
  },
})
export default class Index extends Vue {
  ReceiveWineOrderApi = new ReceiveWineOrderApi('/alcohol-management', _axios);
  /** 数据 */
  state: State = {
    loading: false,
    searchHeight: 84,
    filter: {
      keyWord: '',
      reciveWineOrderNo: '',
      transOrderNo: '',
      factoryArea: '',
      factoryAreaId: undefined,
      wineWarehouseCode: '',
      reciveWineBreedCode: '',
      isDemoted: undefined,
      reciveWineStatus: undefined,
      reciveWineDateBegin: '',
      reciveWineDateEnd: '',
      timeArr: [],
      skipCount: 0,

      maxResultCount: 20,
      currentPage: 1,
      totalCount: 0,
    },
    dataSource: [],
    /** 批量选中的数据 */
    selectRow: {},
    selectRows: [],
    visible: false,
    visible1: false,
    visible2: false,
    active: 0,
    activeName: 'second',
    backTrackingData: {},
    options: [
      {
        value: 1,
        label: '确认降级中',
      },
      {
        value: 2,
        label: '待确认收酒',
      },
      {
        value: 3,
        label: '已完成收酒',
      },
    ],
    options1: [
      {
        value: true,
        label: '是',
      },
      {
        value: false,
        label: '否',
      },
    ],
  };
  /** 生命周期 */
  mounted() {
    this.getDataSource();
  }
  /** 方法 */
  /** 搜索框 */
  handelVisible(height: number) {
    this.state.searchHeight = height;
  }
  // 确定收酒
  handelRecoveredWine() {
    // console.log(1414);
  }
  // 上一步
  lastStep() {
    this.state.active = 0;

    // (this.$refs.backTracking as any).initData(this.state.backTrackingData);
  }
  next() {
    // 验证补录收酒记录表单
    this.state.backTrackingData = (this.$refs.backTracking as any).submit();
    if (!this.state.backTrackingData) return;

    if (this.state.active++ > 2) this.state.active = 0;
  }
  /** 重置 */
  reset() {
    const { filter } = this.state;

    filter.keyWord = '';
    filter.factoryArea = '';
    filter.reciveWineBreedCode = '';
    filter.isDemoted = undefined;
    filter.timeArr = '';

    // filter.isEnabled = undefined;
    this.handleSearch();
  }
  //分页
  changePage(data: PageType) {
    this.state.filter.currentPage = data.currentPage;
    this.state.filter.maxResultCount = data.maxResultCount;
    this.state.filter.skipCount = data.skipCount;
    this.getDataSource();
  }
  /** 搜索的回调 */
  search(data: any) {
    this.state.filter.keyWord = data.keys;

    this.handleSearch();
  }
  handleSearch() {
    this.state.filter.skipCount = 0;
    this.state.filter.currentPage = 1;

    if (this.state.filter.timeArr?.length) {
      this.state.filter.reciveWineDateBegin = this.state.filter.timeArr[0];
      this.state.filter.reciveWineDateEnd = this.state.filter.timeArr[1];
    } else {
      this.state.filter.reciveWineDateBegin = '';
      this.state.filter.reciveWineDateEnd = '';
    }

    this.getDataSource();
  }

  // 点击进入详情
  handDetail(val: any) {
    this.state.visible1 = true;
    this.state.selectRow = val;
  }
  /** 查询列表 */
  getDataSource() {
    this.state.loading = true;
    const { filter } = this.state;

    this.ReceiveWineOrderApi.getList5(
      filter.keyWord,
      filter.reciveWineOrderNo,
      filter.transOrderNo,
      filter.factoryArea,
      filter.wineWarehouseCode,

      filter.isDemoted,
      filter.reciveWineStatus,
      filter.reciveWineDateBegin,
      filter.reciveWineDateEnd,

      filter.skipCount,
      filter.maxResultCount
    )
      .then((res: any) => {
        this.state.dataSource = res.items || [];

        this.state.filter.totalCount = res.totalCount || 0;
      })
      .finally(() => {
        this.state.loading = false;
      });
  }

  handlefactoryArea(id: string, obj: any) {
    if (!id) {
      this.state.filter.factoryArea = undefined;
      this.handleSearch();
      return;
    }

    this.state.filter.factoryAreaId = obj[0].id;
    this.state.filter.factoryArea = obj[0].value;

    this.handleSearch();
  }
  /** 监听 */

  // 当关闭弹窗是，active位0

  @Watch('state.visible', { immediate: false })
  changeActive(val: any) {
    if (val == false) {
      this.state.active = 0;
    }
  }

  /** 计算属性 */
  get columns(): Column[] {
    return [
      { key: 'transOrderNo', title: '交酒单号' },
      { key: 'reciveWineOrderNo', title: '收酒单号' },
      //
      { key: 'factoryName', title: '收酒厂区' },

      { key: 'reciveWineBreed', title: '收酒酒品' },
      { key: 'reciveWineBreedCode', title: '酒品代码' },
      //
      { key: 'reciveWineBreedMaduDate', title: '生产年月' },
      //
      { key: 'weight', title: '原度数量' },
      { key: 'convertValue', title: '折60°数量' },
      //
      { key: 'reciveWineDate', title: '收酒日期' },
      //

      { key: 'isDemoted', title: '是否降级' },

      { key: 'handel', title: '操作' },
    ];
  }
  get breadData(): BreadType[] {
    return [
      { key: 'k1', title: '库存业务管理' },
      { key: 'k2', title: '收酒' },
    ];
  }
}
</script>
<style lang="scss" scoped>
.cursor {
  color: var(--primary);
  cursor: pointer;
}
:deep(.el-popper) {
  height: 172px !important;
  width: 200px !important;
}
</style>
